<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack"><view class="iconfont icon-zuojiantou"></view></view>
				<view class="kaoshi-head-m">修改密码</view>
			</view>
		</view>
		<view class="login-content">
			<view class="login">
				<view class="input-group">
					<view class="input-row border login-flex">
						<m-input type="text" focus clearable v-model="account" placeholder="请输入手机号"></m-input>
						<view class="yanzheng" @tap="!safety.state ? fnGetPhoneCode() : ''">{{ (!safety.state && '获取验证码') || safety.time + ' s' }}</view>
					</view>
					<view class="input-row border"><m-input type="text" clearable v-model="code" placeholder="请输入短信验证码"></m-input></view>
					<view class="input-row border"><m-input type="password" displayable v-model="password" placeholder="请输入新密码"></m-input></view>
					<view class="input-row border"><m-input type="password" displayable v-model="repassword" placeholder="请再次确认新密码"></m-input></view>
				</view>
				<view class="login-button"><button type="primary" class="primary" @tap="change_password">提交</button></view>
			</view>
		</view>
	</view>
</template>

<script>
import mInput from '@/components/m-input.vue';

export default {
	components: {
		mInput
	},
	data() {
		return {
			account: '',
			password: '',
			repassword: '',
			code: '',
			phoneReg: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
			safety: {
				state: false,
				interval: null,
				time: 60
			}
		};
	},
	methods: {
		/**
		 * 获取验证码
		 */
		async fnGetPhoneCode() {
			if (this.phoneReg.test(this.account)) {
				uni.showToast({
					title: '正在发送验证码',
					icon: 'loading'
				});

				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.mobileCode,
					data: {
						mobile: this.account,
						event: 'resetpwd'
					}
				});
				if (res.code === 1) {
					// 成功后显示倒计时60s后可在点击
					this.safety.state = true;
					// 倒计时
					this.safety.interval = setInterval(() => {
						if (this.safety.time-- <= 0) {
							this.safety.time = 60;
							this.safety.state = false;
							clearInterval(this.safety.interval);
						}
					}, 1000);

					uni.showToast({
						title: '发送成功',
						icon: 'success'
					});
				}
			} else {
				uni.showToast({
					title: '手机号不正确',
					icon: 'none'
				});
			}
		},
		async change_password() {
			/**
			 * 客户端对账号信息进行一些必要的校验。
			 * 实际开发中，根据业务需要进行处理，这里仅做示例。
			 */
			if (this.account.length < 5) {
				this.$myUtils.$prompt.showToast({
					icon: 'none',
					title: '账号最短为 5 个字符'
				});
				return;
			}
			if (this.code.length < 4) {
				this.$myUtils.$prompt.showToast({
					icon: 'none',
					title: '验证码最短为 4 个字符'
				});
				return;
			}

			if (this.password.length < 6) {
				this.$myUtils.$prompt.showToast({
					icon: 'none',
					title: '密码最短为 6 个字符'
				});
				return;
			}
			if (this.repassword !== this.password) {
				this.$myUtils.$prompt.showToast({
					icon: 'none',
					title: '两次输入密码不一致'
				});
				return;
			}

			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.resetPwd,
				data: {
					mobile: this.account,
					captcha: this.code,
					newpassword: this.password,
					renewpassword: this.repassword
				}
			});
			if (res.code === 1) {
				this.$myUtils.$prompt.showToast({
					icon: 'none',
					title: '修改成功'
				});
				this.$myUtils.$router.navigateBack();
			}
		}
	}
};
</script>

<style>
page {
	background: #fff;
}
.login {
	margin:8px 18px;
}
.login-content {
	width: 100%;
	margin: 0 auto;
	background: #fff;
}
.login-flex{
	display: flex;
	align-items: center;
	justify-content: space-between
}
.input-group::after,
.input-row.border::after {
	background-color: #f6f7f9 !important;
}
.login-button {
	margin-top: 20px;
}
.login-forget {
	color: #007aff;
	font-size: 14px;
	margin: 12px 0;
}
.input-group {
	margin-top: 0;
}
.input-group::before {
	background-color: #fff !important;
}
.primary {
	background: #3c7bfc!important;
	color: #fff!important;
	border-radius: 30px;
	box-shadow: 0 2px 11px rgba(0, 100, 204, 0.27);
}
.yanzheng {
	width: 88px;
	height: 30px;
	font-size: 13px;
	line-height: 30px;
	color: #fff;
	background: #3c7bfc;
	text-align: center;
	border-radius: 16px 16px 16px 0;
}
</style>
